<template>
  <a-drawer v-model:visible="visible" title="设备档案" :width="width >= 600 ? 600 : '100%'" :footer="false">
    <fieldset>
      <legend>基础信息</legend>
      <a-descriptions :column="2" size="large" class="general-description">
        <a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
        <a-descriptions-item label="设备编号">{{ dataDetail?.code }}</a-descriptions-item>
        <a-descriptions-item label="二维码地址">{{ dataDetail?.qrCodeUrl }}</a-descriptions-item>
        <a-descriptions-item label="分类">{{ dataDetail?.categoryName }}</a-descriptions-item>
        <a-descriptions-item label="品牌">{{ dataDetail?.brand }}</a-descriptions-item>
        <a-descriptions-item label="型号">{{ dataDetail?.model }}</a-descriptions-item>
        <a-descriptions-item label="所属机构">{{ dataDetail?.deptName }}</a-descriptions-item>
        <a-descriptions-item label="使用人">{{ dataDetail?.userNickname }}</a-descriptions-item>
        <a-descriptions-item label="登记日期">{{ dataDetail?.purchaseDate }}</a-descriptions-item>
        <a-descriptions-item label="状态">{{ dataDetail?.status }}</a-descriptions-item>
        <a-descriptions-item label="到期日期">{{ dataDetail?.expireDate }}</a-descriptions-item>
        <a-descriptions-item label="折旧规则">{{ dataDetail?.depreciationRuleId }}</a-descriptions-item>
        <a-descriptions-item label="序列号">{{ dataDetail?.sn }}</a-descriptions-item>
        <a-descriptions-item label="供应商">{{ dataDetail?.producerName }}</a-descriptions-item>
        <a-descriptions-item label="采购价格">{{ dataDetail?.price }}</a-descriptions-item>
        <a-descriptions-item label="描述">{{ dataDetail?.description }}</a-descriptions-item>
        <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
      </a-descriptions>
    </fieldset>
    <fieldset>
      <legend>设备履历</legend>
      <a-timeline :style="{ marginRight: '40px' }">

        <a-timeline-item v-for="(item, index) in dataTracks" :label="item.createTime" lineType="dashed">
          {{ item.carryName }}
          <br />
          <a-typography-text type="secondary" :style="{ fontSize: '12px', marginTop: '4px' }">
            {{ item.content }}
          </a-typography-text>
        </a-timeline-item>

        <!-- 无数据时显示提示 -->
        <div v-if="dataTracks.length === 0" style="text-align: center; padding: 20px;">
          无数据
        </div>
      </a-timeline>
    </fieldset>

  </a-drawer>
</template>

<script setup lang="ts">
  import { useWindowSize } from '@vueuse/core'
  import { type DeviceRecordsDetailResp, getDeviceRecords as getDetail } from '@/apis/asset/device/records'
  import { type DeviceTracksResp, getDeviceTracks as getTracks } from '@/apis/asset/device/records'


  const { width } = useWindowSize()

  const dataId = ref('')
  const dataDetail = ref < DeviceRecordsDetailResp > ()
  const dataTracks = ref < DeviceTracksResp[] > ([])
  const visible = ref(false)

  // 查询详情
  const getDataDetail = async () => {
    const { data } = await getDetail(dataId.value)
    dataDetail.value = data
  }

  // 履历详情
  const getDataTracks = async () => {
    const { data } = await getTracks(dataId.value)
    dataTracks.value = data
    console.log(data)
  }

  // 打开
  const onOpen = async (id: string) => {
    dataId.value = id
    await getDataDetail()
    await getDataTracks()
    visible.value = true
  }

  defineExpose({ onOpen })
</script>

<style scoped lang="scss">
  fieldset {
    padding: 15px 15px 0 15px;
    margin-bottom: 15px;
    border: 1px solid var(--color-neutral-3);
    border-radius: 3px;
  }

  fieldset legend {
    color: rgb(var(--gray-10));
    padding: 2px 5px 2px 5px;
    border: 1px solid var(--color-neutral-3);
    border-radius: 3px;
  }
</style>